@use "../../../variables.scss" as *;
@use "./variables.scss" as *;
@use "../fonts" as *;

.sps-panel--with-frame {
  border-radius: var(--sjs2-radius-x250, 20px);
  border: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
  background: var(--sjs2-color-bg-basic-primary, #FFF);
  overflow: hidden;

  // .sps-row {
  //   border-bottom: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
  //   &:last-of-type {
  //     border-bottom: none;
  //   }
  // }
}
.sps-panel--navigation {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x250, 20px);
  align-items: center;
  gap: var(--sjs2-spacing-x150, 12px);

  .sps-panel__header {
     width: auto;
     flex-grow: 1;
     padding: 0;
     display: flex;
     justify-content: flex-end;
   }
  .sps-panel__content {
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  .sps-row {
    border: none;
    padding: 0 0 0 var(--tokens-spacing-static-positive-x300, 24px);
    border-left: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
    &:first-of-type {
      padding-left: 0;
      border-left: none;
    }
  }
  .sps-question__content {
    padding: 0;
  }
  .sps-row--multiple {
    & > div {
      padding: 0;
      border: none;
    }
    .sps-question--nested {
        overflow-y: visible;
    }
  }
}
.sps-panel__header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x250, 20px) 0 var(--sjs2-spacing-x250, 20px);
  align-items: flex-start;
  align-self: stretch;
}

.sps-panel__title {
  flex-grow: 1;
  color: var(--sjs2-color-fg-basic-primary, #1C1B20);

  @include sjs2--typography--default-strong;
}


.sps-panel__content {
  display: flex;
  flex-direction: column;
  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px) var(--sjs2-spacing-x250, 20px);
  gap: var(--sjs2-spacing-x200, 16px);
}

.sps-panel--nested {
  .sps-panel__header {
    padding: 0;
  }

  .sps-panel__content {
    padding: var(--sjs2-spacing-x200, 16px) 0 0;
  }
}

.sps-panel--collapsed {
  padding-bottom: var(--sjs2-spacing-x200, 16px);
}